<!DOCTYPE html>
<html>
  <head>
    <title>behaviour-collisionBall</title>
    <meta
      name="viewport"
      id="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta charset="utf-8" />
    <style type="text/css">
      body {
        font-family: Monospace;
        background-color: #f0f0f0;
        margin: 0px;
        overflow: hidden;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -khtml-user-select: none;
        user-select: none;
      }

      #canvas {
        background: #000000;
      }

      #press {
        top: 2px;
        left: 10px;
        position: absolute;
        text-align: center;
        color: #fff;
        font-size: 24pt;
      }
    </style>
  </head>

  <body>
    <canvas id="canvas"></canvas>
    <div id="press">
      press
    </div>
    <script src="../../lib/requestAnimationFrame.min.js"></script>
    <script src="../../lib/stats.min.js"></script>
    <script src="//localhost:3001/build/proton.js"></script>
    <script>
      var canvas;
      var context;
      var proton;
      var renderer;
      var emitter;

      main();

      function main() {
        initCanvas();
        createProton();
        tick();
      }

      function initCanvas() {
        canvas = document.getElementById("canvas");
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        context = canvas.getContext("2d");
        //canvas.getContext('2d').globalCompositeOperation = "lighter";
        canvas.addEventListener("mousedown", mousedownHandler, false);
        canvas.addEventListener("mouseup", mouseupHandler, false);
        canvas.addEventListener("mousemove", mousemoveHandler, false);
      }

      function createProton() {
        proton = new Proton();
        emitter = new Proton.Emitter();
        emitter.rate = new Proton.Rate(new Proton.Span(1, 2), 0.012);

        emitter.addInitialize(new Proton.Mass(1));
        emitter.addInitialize(new Proton.Radius(2, 20));
        emitter.addInitialize(new Proton.Life(10, 13));
        emitter.addInitialize(
          new Proton.Velocity(
            new Proton.Span(1, 2),
            [45, 135, 225, 315],
            "polar"
          )
        );

        emitter.addBehaviour(new Proton.Collision(emitter));
        emitter.addBehaviour(new Proton.Color("#dddddd"));
        emitter.addBehaviour(
          new Proton.CrossZone(
            new Proton.RectZone(0, 0, canvas.width, canvas.height),
            "bound"
          )
        );

        emitter.damping = 0.02;
        proton.addEmitter(emitter);

        renderer = new Proton.CanvasRenderer(canvas);
        renderer.onProtonUpdate = function() {
          context.fillStyle = "rgba(0, 0, 0, 0.09)";
          context.fillRect(0, 0, canvas.width, canvas.height);
        };

        proton.addRenderer(renderer);
      }

      function mousedownHandler(e) {
        emitter.emit();
      }

      function mouseupHandler(e) {
        emitter.stop();
      }

      function mousemoveHandler(e) {
        if (e.layerX || e.layerX == 0) {
          emitter.p.x = e.layerX;
          emitter.p.y = e.layerY;
        } else if (e.offsetX || e.offsetX == 0) {
          emitter.p.x = e.offsetX;
          emitter.p.y = e.offsetY;
        }
      }

      function tick() {
        requestAnimationFrame(tick);
        proton.update();
      }
    </script>
  </body>
</html>
